<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>
<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="post">
        <table>
            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>
            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>

            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>
        </table>
        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>


<script>
    //校验用户名
    //1.获取username输入框对象
    let usernameInput = document.getElementById("username");
    //2.绑定onblur事件
    usernameInput.onblur=testUsername
    function testUsername(){
        //当鼠标一走了就去判断输入的用户名是否符合格式
        //3.获取输入框的username,并且去掉输入框中的空格
        let username = usernameInput.value.trim();
        //获取错误提示信息的对象
        let username_err = document.getElementById("username_err");
        var reg=/^[A-Za-z]{6,12}$/;
        let flag =reg.test(username);

        // var flag=username.length>=6&&username.length<=12
        if (flag){
            //此时就将显示的错误信息隐藏起来
            username_err.style.display='none'

        }else{
            //用户名格式错误就提示错误信息（刚开始在html我们设置的是默认为隐藏状态）
            username_err.style.display=''
        }
        return flag

    }



    //校验用户密码
    //1.获取username输入框对象
    let passwordInput = document.getElementById("password");
    //2.绑定onblur事件
    passwordInput.onblur=testPassword
    function testPassword(){
        //当鼠标一走了就去判断输入的用户名是否符合格式
        //3.获取输入框的username,并且去掉输入框中的空格
        let password = passwordInput.value.trim();
        //获取错误提示信息的对象
        let password_err = document.getElementById("password_err");
        var reg=/^\w{6,12}$/
        let flag = reg.test(password);

        // var flag=password.length>=6&&password.length<=12
        if (flag){
            //此时就将显示的错误信息隐藏起来
            password_err.style.display='none'

        }else{
            //用户名格式错误就提示错误信息（刚开始在html我们设置的是默认为隐藏状态）
            password_err.style.display=''
        }
        return flag

    }

    //校验手机号
    //1.获取username输入框对象
    let telInput = document.getElementById("tel");
    //2.绑定onblur事件
    telInput.onblur=testTel
    function testTel(){
        //当鼠标一走了就去判断输入的用户名是否符合格式
        //3.获取输入框的username,并且去掉输入框中的空格
        let tel = telInput.value.trim();
        //获取错误提示信息的对象
        let tel_err = document.getElementById("tel_err");
        var reg=/^[1]\d{10}$/
        let flag = reg.test(tel);
        // var flag=tel.length>=6&&tel.length<=12
        if (flag){
            //此时就将显示的错误信息隐藏起来
            tel_err.style.display='none'

        }else{
            //用户名格式错误就提示错误信息（刚开始在html我们设置的是默认为隐藏状态）
            tel_err.style.display=''
        }
        return flag

    }


    //表单提交认证，只有填写的所有信息符合格式才可以提交信息，不然不能点击注册按钮
    //获取表单对象

    document.getElementById("reg-form").onsubmit=function (){
        var flag=testUsername()&&testPassword()&&testTel()
        return flag
    }
</script>
</body>
</html>